<template>
    <div id="detail">
        <NavigationBar></NavigationBar>
        <div id="box">
            <div id="line1">
                <div id="geo-logo"></div>
                <small>当前位置：</small>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>视觉设计</el-breadcrumb-item>
                    <el-breadcrumb-item>中级</el-breadcrumb-item>
                    <el-breadcrumb-item>一、Banner设计</el-breadcrumb-item>
                    <!-- <h5>01.店铺主图设计</h5> -->
                    <small>01.店铺主图设计</small>
                </el-breadcrumb>
            </div>
            <div id="line2">
                <div class='design'>
                    <div style="font-size:22px;margin-bottom: 20px;">01.店铺主图设计</div>
                    <div style="font-size:14px;">
                        <span style="color:#ACACAC">上架时间：</span>
                        <span style="color:#FF5C01">2017-11-13</span>
                    </div>
                    
                </div>
                <div class='design'>
                    <div style="margin-bottom: 20px;">
                        <span style="color:#ACACAC;font-size:18px;">套餐价格：</span>
                        <span style="color:#FFCF04;font-size:24px;">1998/ 套</span>
                        <button class="allRight">立即购买</button>
                    </div>
                    <div style="font-size:14px;">
                        <span style="color:#ACACAC;margin-right: 50px;">套餐价格：
                            <span style="color:#02B2FB;">23454</span> 人
                        </span>
                        <span style="color:#ACACAC;;">学习次数：
                            <span style="color:#02B2FB;">4832</span> 次
                        </span>
                    </div>
                </div>
            </div>

            <!-- 第三部分：视频播放 -->
            <div class="lesson">
                <div class="play">
                    <img src="/imgs/vip/bf_01.png" class="stop">
                </div>
                <div class="catalog">讲师+课程</div>
            </div>
        </div>
    </div>
</template>

<script>
import NavigationBar from '@/components/NavigationBar.vue'
export default {
    components:{
		NavigationBar,
	},
    data () {
        return {

        };
    },
}

</script>
<style scoped>
#detail /deep/ #root{
    background-color: #020F1C;
    color: white;
}
#detail /deep/ .nav{
    /* width: 1200px; */
}
#detail{
    background-color: black;
}
#box{
    width: 1200px;
    height: 1000px;
    margin: 0 auto;
    color: white;
}
#line1{
    display: flex;
    align-items: center;
    padding: 30px 0;
    /* border: 1px solid white; */
}
#geo-logo{
    width:13px;
    height:15px;
    border: 1px solid red;
    margin-right: 5px;
}
#line2{
    width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}
.design{
    width: 50%;
    margin-bottom: 30px;
}
.allRight{
    border: none;
    background-color: #02B2FB;
    padding: 10px 35px;
    color: white;
    margin-left: 30px;
}
.lesson{
    display: flex;
    height: 500px;
}
.play{
    width: 75%;
    height: 90%;
    border: 1px solid red;
    background-image: url(/imgs/vip/tu03.png);
    background-size: 100% 100%;
    position: relative;
}
.stop{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.catalog{
    width: 25%;
    border: 1px solid green;
}
</style>